<link  href="/assets/back/plugin/cropper/cropper.min.css" rel="stylesheet">
<style>
    #img-container,
    #coverUploader .img-preview {
        background-color: #f7f7f7;
        overflow: hidden;
        width: 100%;
        text-align: center;
    }

    #img-container {
        min-height: 200px;
        max-height: 466px;
        margin-bottom: 20px;
    }

    @media (min-width: 768px) {
        #img-container {
            min-height: 466px;
        }
    }

    #img-container > img {
        max-width: 100%;
    }

    #coverUploader .docs-preview {
        margin-right: -15px;
        margin-bottom: 10px;
    }

    #coverUploader .img-preview {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    #coverUploader .img-preview > img {
        max-width: 100%;
    }

    #coverUploader .preview-lg {
        width: 263px;
        height: 148px;
    }

    #coverUploader .preview-md {
        width: 139px;
        height: 78px;
    }

    #coverUploader .preview-sm {
        width: 69px;
        height: 39px;
    }

    #coverUploader .preview-xs {
        width: 35px;
        height: 20px;
        margin-right: 0;
    }
    #coverUploader .docs-buttons .btn[data-method]{
        display: none;
    }
    #inputImageLabel{
        display: block!important;
    }
    #editUpload{
        display: block
    }
</style>
<div class="hide" id="img-container">
    <img src="${cover!}">
</div>
<div class="row" id="coverUploader">
    <div class="col-md-5">
        <div class="docs-data hide">
            当前裁剪框大小&nbsp;&nbsp;&nbsp;
            <span>宽:<span id="dataWidth"></span></span>
            <span>高:<span id="dataHeight"></span></span>
        </div><br>
        <div class="docs-preview clearfix hide">
            <div class="img-preview preview-lg"></div>
            <div class="img-preview preview-md"></div>
            <div class="img-preview preview-sm"></div>
            <div class="img-preview preview-xs"></div>
        </div>
    </div>
    <div class="col-md-7">
        <div class="docs-toggles hide">
            <div class="row">裁剪框比例</div>
            <div class="btn-group btn-group-justified" data-toggle="buttons">
                <label class="btn btn-primary active" data-method="setAspectRatio" data-option="1.7777777777777777">
                    <input class="sr-only" id="aspestRatio1" name="aspestRatio" value="1.7777777777777777" type="radio">
                    <span>16:9</span>
                </label>
                <label class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333">
                    <input class="sr-only" id="aspestRatio2" name="aspestRatio" value="1.3333333333333333" type="radio">
                    <span>4:3</span>
                </label>
                <label class="btn btn-primary" data-method="setAspectRatio" data-option="1">
                    <input class="sr-only" id="aspestRatio3" name="aspestRatio" value="1" type="radio">
                    <span>1:1</span>
                </label>
                <label class="btn btn-primary" data-method="setAspectRatio" data-option="0.6666666666666666">
                    <input class="sr-only" id="aspestRatio4" name="aspestRatio" value="0.6666666666666666" type="radio">
                    <span>2:3</span>
                </label>
                <label class="btn btn-primary" data-method="setAspectRatio" data-option="2">
                    <input class="sr-only" id="aspestRatio5" name="aspestRatio" value="2" type="radio">
                    <span>2:1</span>
                </label>
                <label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN">
                    <input class="sr-only" id="aspestRatio6" name="aspestRatio" value="NaN" type="radio">
                    <span>自定义</span>
                </label>
            </div>
        </div>
        <div class="docs-buttons">
            <div class="btn-group hide">
                <button class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="Move">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="移动裁剪框">
                                                                  <i class="fa fa-arrows"></i>
                                                                </span>
                </button>
                <button class="btn btn-primary" data-method="setDragMode" data-option="crop" type="button" title="Crop">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="重设裁剪框">
                                                                  <i class="fa fa-refresh"></i>
                                                                </span>
                </button>
                <button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="缩小0.1倍">
                                                                  <i class="fa fa-compress"></i>
                                                                </span>
                </button>
                <button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="放大0.1倍">
                                                                  <i class="fa fa-expand"></i>
                                                                </span>
                </button>
                <button class="btn btn-primary" data-method="rotate" data-option="-45" type="button">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="逆时针旋转45°">
                                                                  <i class="fa fa-rotate-left"> </i>
                                                                </span>
                </button>
                <button class="btn btn-primary" data-method="rotate" data-option="45" type="button">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="顺时针旋转45°">
                                                                   <i class="fa fa-rotate-right"> </i>
                                                                </span>
                </button>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary" data-method="disable" type="button">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="锁定裁剪框">
                                                                  <i class="fa fa-lock"></i>
                                                                </span>
                </button>
                <button class="btn btn-primary" data-method="enable" type="button">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="解锁裁剪框">
                                                                   <i class="fa fa-unlock"></i>
                                                                </span>
                </button>
                <button class="btn btn-primary" data-method="clear" type="button">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="清除裁剪框">
                                                                   <i class="fa fa-power-off"></i>
                                                                </span>
                </button>
                <button class="btn btn-primary" data-method="reset" type="button">
                                                                <span class="docs-tooltip" data-toggle="tooltip" title="恢复初始化">
                                                                  <i class="fa fa-refresh"></i>
                                                                </span>
                </button>
                <button class="btn btn-warning" type="button" id="editUpload">
                    <span class="docs-tooltip" data-toggle="tooltip" title="修改">
                      <i class="fa fa-pencil-square-o"></i>
                    </span>
                </button>
                <label class="btn btn-danger btn-upload" for="inputImage" id="inputImageLabel">
                    <input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
                    <span class="docs-tooltip" data-toggle="tooltip" title="选择本地文件">
                                                                    <i class="fa fa-upload"></i>
                                                                </span>
                </label>
                <!--<button class="btn btn-primary" data-method="destroy" type="button">-->
                                                                <!--<span class="docs-tooltip" data-toggle="tooltip" title="销毁裁剪">-->
                                                                  <!--<i class="zmdi zmdi-power zmdi-hc-fw"></i>-->
                                                                <!--</span>-->
                <!--</button>-->
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="btn-group-crop hide">
            快速上传
            <button class="btn btn-primary" data-method="getCroppedCanvas" type="button">
                                                            <span class="docs-tooltip" data-toggle="tooltip" title="快速上传裁剪图">
                                                              上传裁剪图
                                                            </span>
            </button>
            <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }" type="button">
                                                            <span class="docs-tooltip" data-toggle="tooltip" title="快速上传裁剪图(160x90)">
                                                              上传裁剪图(160x90)
                                                            </span>
            </button>
            <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }" type="button">
                                                            <span class="docs-tooltip" data-toggle="tooltip" title="快速上传裁剪图(320x180)">
                                                             上传裁剪图(320x180)
                                                            </span>
            </button>
        </div>
    </div>
</div>
